<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>推箱子</title>
    <style>
        .page {
            width: 400px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .game {
            width: 320px;
            height: 320px;
            margin: 40px auto;
            border: 1px solid #000;
        }

        button {
            width: 320px;
            padding: 10px 0;
            border: none;
            background-color: skyblue;
            box-sizing: border-box;
        }

        button:hover {
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="page">
    <div class="game">
        <canvas id="game" width="320" height="320"></canvas>
    </div>
    <div class="control">
        <button id="start">新游戏</button>
    </div>
</div>
<script src="./js/Scene.js"></script>
<script>
  let scene

  const btn_start = document.getElementById('start')

  const canvas = document.getElementById('game')
  const context = canvas.getContext('2d')

  const map = [
    [1, 1, 0, 0, 0, 0, 0, 0, 1, 1],
    [0, 0, 0, 1, 1, 2, 1, 0, 0, 0],
    [0, 1, 4, 2, 4, 4, 4, 1, 1, 0],
    [0, 1, 0, 1, 0, 2, 1, 0, 1, 0],
    [0, 1, 1, 2, 1, 2, 1, 0, 1, 0],
    [0, 0, 0, 1, 1, 4, 1, 1, 1, 0],
    [1, 1, 0, 1, 4, 2, 0, 0, 0, 0],
    [1, 1, 0, 1, 1, 1, 0, 1, 1, 1],
    [1, 1, 0, 1, 1, 1, 0, 1, 1, 1],
    [1, 1, 0, 0, 0, 0, 0, 1, 1, 1],
  ]

  const manPos = [2, 4]

  const IMG_SIZE = 32
  let loadProcess = 0
  let i_wall = new Image(IMG_SIZE, IMG_SIZE)
  let i_road = new Image(IMG_SIZE, IMG_SIZE)
  let i_aim = new Image(IMG_SIZE, IMG_SIZE)
  let i_man = new Image(IMG_SIZE, IMG_SIZE)
  let i_nBox = new Image(IMG_SIZE, IMG_SIZE)
  let i_aBox = new Image(IMG_SIZE, IMG_SIZE)
  i_wall.src = './img/0.jpg'
  i_road.src = './img/1.jpg'
  i_aim.src = './img/2.jpg'
  i_man.src = './img/3.jpg'
  i_nBox.src = './img/4.jpg'
  i_aBox.src = './img/5.jpg'

  i_wall.onload = () => loadProcess++
  i_road.onload = () => loadProcess++
  i_aim.onload = () => loadProcess++
  i_man.onload = () => loadProcess++
  i_nBox.onload = () => loadProcess++
  i_aBox.onload = () => loadProcess++

  let imgSrc = [i_wall, i_road, i_aim, i_man, i_nBox, i_aBox]

  const getPosition = (i, j) => [i * 32, j * 32]

  /**
   * 渲染函数
   * @param {CanvasRenderingContext2D} context
   * @param {Array} scene
   * @param {[number, number]} man
   */
  function render (context, scene, man) {
    for (let i = 0; i < scene.length; i++) {
      let line = scene[i]
      for (let j = 0; j < line.length; j++) {
        let value = line[j]
        let img = imgSrc[value]
        let [x, y] = getPosition(j, i)
        context.drawImage(img, x, y)
      }
    }

    let [x, y] = getPosition(...man)
    context.drawImage(i_man, x, y)
  }

  function init () {
    const mapCopy = JSON.parse(JSON.stringify(map))
    scene = new Scene(mapCopy, manPos)
    render(context, scene.getScene(), scene.getMan())
  }

  let timer = setInterval(() => {
    if (loadProcess === 6) {
      init()
      clearInterval(timer)
    }
  }, 500)

  document.onkeydown = function (e) {
    let direction = e.key.replace('Arrow', '')
    if (!scene) return
    if (!scene.move(direction)) return
    render(context, scene.getScene(), scene.getMan())
    if (scene.judgeWin()) {
      setTimeout(() => {
        alert('闯关成功！')
      }, 50)
    }
  }

  btn_start.onclick = () => {
    init()
  }
</script>
</body>
</html>